<!--
 * @Description: 
 * @Author: ldx
 * @Date: 2023-03-02 21:05:41
 * @LastEditors: ldx
 * @LastEditTime: 2023-04-19 10:02:07
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    #canvas {
      /* background: red; */
    }
  </style>
</head>

<body>
  <script id="vertex" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    // 位移
    uniform vec4 u_transform;
    // 旋转
    uniform float u_angle;
    float ang = radians(u_angle);
    float sinV = sin(ang);
    float cosV = cos(ang);
    // 缩放
    uniform float u_scale;
    void main(){
      // 顶点位置
      gl_Position = vec4(vec3(a_Position)*u_scale,1.0);
      gl_Position.x = gl_Position.x * cosV - gl_Position.y * sinV;
      gl_Position.y = gl_Position.y * cosV + gl_Position.x * sinV;
      gl_Position.z = gl_Position.z;
      gl_Position.w = 1.0;
      gl_Position = gl_Position + u_transform;
      // gl_Position = a_Position;
    }
  </script>
  <script id="fragment" type="x-shader/x-fragment">
    void main(){
      // 片元颜色
      gl_FragColor = vec4(1,0,0,1);
    }
  </script>
  <canvas id="canvas"></canvas>
  <script type="module">
    import { initProgram } from '../jsm/utils.js'
    const canvas = document.querySelector('#canvas')
    // 设置canvas容器的宽高
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    // 获取webgl上下文
    const gl = canvas.getContext('webgl');
    // 声明将来用来清空绘图区的颜色。分别对应r,g,b,a
    gl.clearColor(0, 0, 0, 1)
    // 使用之前声明的颜色，清空绘图区
    gl.clear(gl.COLOR_BUFFER_BIT)

    // 初始化程序对象
    initProgram(gl)

    // 声明顶点数据
    const vertices = new Float32Array([
      0,0.2,
      -0.1,-0.2,
      0.1,-0.2,
    ])
    
    // 创建缓冲区
    const vertexBuffer = gl.createBuffer()
    // 绑定缓冲区
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
    // 写入缓冲数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

    // 获取attribute变量并修改
    const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
    // 修改attribute变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)

    // 获取uniform变量
    const u_transform = gl.getUniformLocation(gl.program, 'u_transform')
    const u_angle = gl.getUniformLocation(gl.program, 'u_angle')
    const u_scale = gl.getUniformLocation(gl.program, 'u_scale')
    
    
    // 启用当前绑定缓冲区的顶点数组
    gl.enableVertexAttribArray(a_Position)

    // 绘制一系列三角形
    gl.drawArrays(gl.TRIANGLES, 0, vertices.length/2)

    let angle = 0,scale = 1,flag = true,x = 0.3,y = 0
    !(function ani(){
      angle+=1
      flag ?scale+=0.04:scale-=0.04
      if(angle === 360){
        angle = 0
      }
      if(scale < 1){
        flag = true
      }
      if(scale > 2){
         flag = false
      }
      const rad = Math.PI * angle / 180
      const x1 = x * Math.cos(rad) - 0
      const y1 = 0 + x * Math.sin(rad) 
      gl.uniform1f(u_angle, angle)
      gl.uniform1f(u_scale, scale)
      gl.uniform4f(u_transform, x1,y1,0,0)
      gl.clearColor(0, 0, 0, 1)
      // 使用之前声明的颜色，清空绘图区
      gl.clear(gl.COLOR_BUFFER_BIT)
      // 绘制一系列三角形
      gl.drawArrays(gl.TRIANGLES, 0, vertices.length/2)
      requestAnimationFrame(ani)
    })()
    
  </script>
</body>

</html>